<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="运单编号:">
        <el-input v-model="formInline.user" style="width:280px" placeholder="请输入运单编号" />
      </el-form-item>

      <el-form-item label="订单编号:">
        <el-input style="width:280px" placeholder="请输入订单编号" />
      </el-form-item>

      <el-form-item label="调度状态:">
        <el-select v-model="formInline" style="width:280px" placeholder="请选择">
          <el-option label="待调度" value="" />
          <el-option label="未匹配线路" value="" />
          <el-option label="已调度" value="" />
        </el-select>
      </el-form-item>

      <el-form-item label="起始地机构:">
        <el-select v-model="formInline" style="width:160px" placeholder="请选择起始地机构">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
      </el-form-item>

      <el-form-item label="目的地机构:">
        <el-select v-model="formInline" style="width:200px" placeholder="请选择目的地机构">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
      </el-form-item>

      <el-form-item label="当前所在地机构:">
        <el-select v-model="formInline" style="width:160px" placeholder="请选择当前所在地机构">
          <el-option label="未付" value="" />
          <el-option label="已付" value="" />
        </el-select>
      </el-form-item>
      <el-form-item />
    </el-form>
    <!-- 按钮 -->
    <el-row>
      <el-button type="primary">搜索</el-button>
      <el-button type="info">重置</el-button>
    </el-row>
    <!-- 标签页 -->
    <el-tabs>
      <el-tab-pane label="全部">全部</el-tab-pane>
      <el-tab-pane label="新建">配置管理</el-tab-pane>
      <el-tab-pane label="已装车">角色管理</el-tab-pane>
      <el-tab-pane label="运输中">定时任务补偿</el-tab-pane>
      <el-tab-pane label="到达终端网点">定时任务补偿</el-tab-pane>
      <el-tab-pane label="拒收">定时任务补偿</el-tab-pane>
    </el-tabs>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="date"
        label="序号"
        width="150"
      />
      <el-table-column
        prop="name"
        label="运单编号"
        width="120"
      />
      <el-table-column
        prop="province"
        label="订单编号"
        width="120"
      />
      <el-table-column
        prop="city"
        label="运单状态"
        width="120"
      />
      <el-table-column
        prop="address"
        label="调度状态"
        width="300"
      />
      <el-table-column
        prop="address"
        label="起始营业部"
        width="300"
      />
      <el-table-column
        prop="address"
        label="终点营业部"
        width="300"
      />
      <el-table-column
        prop="address"
        label="当前所在机构"
        width="300"
      />
      <el-table-column
        prop="address"
        label="下一个机构"
        width="300"
      />
      <el-table-column
        prop="address"
        label="货品总体积(立方米)"
        width="300"
      />
      <el-table-column
        prop="address"
        label="货品总重量(千克)"
        width="300"
      />
      <el-table-column
        prop="address"
        label="创建时间"
        width="300"
      />
      <el-table-column
        prop="address"
        label="更新时间"
        width="300"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template>
          <el-button type="text" size="small" @click="$router.push(`/table/detail`)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
  </div>
</template>

<script>
import { pageAPI } from '@/api/bill.js'
export default {
  name: 'VueLogIndex',
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      // 数据
      formData: {
        id: '', // 运单编号
        orderId: '', // 订单编号
        status: 1, // 运单状态
        schedulingStatus: 1, // 调度状态
        startAgencyName: null, // 起始营业部
        endAgencyName: null, // 终点营业部
        currentAgencyName: '武昌部', // 当前所在机构
        nextAgencyName: null, // 下一个机构
        totalVolume: 0.0001, // 货品总体积
        totalWeight: 1, // 货品总重量
        created: '2023-05-24 20:30:25', // 创建时间
        updated: '2023-05-24 21:44:13', // 更新时间
        page: 5,
        pageSize: 10
      },
      // 假数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  created() {
    this.pageAPI()
  },
  methods: {
    // 渲染数据
    async pageAPI() {
      const res = await pageAPI(this.formData)
      console.log(res)
      // this.pageAPI = res.data.backlog
    },
    handleClick(row) {
      // console.log(row)
    }
  }

}
</script>

<style lang="scss" scoped>
h3{
  margin: 20px;
  margin-top: 20px;
}
.el-form{
   margin:20px 20px;
}
.el-button{
  position: relative;
  top: 10px;
  margin-left: 20px;
}
.el-tabs{
 position: relative;
  top: 30px;
   margin-left: 20px;
}
.el-pagination{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
